import React from "react";
import { Row, Col, Form, Icon, Input, Button, Radio, message } from "antd";
// api中与 另一个接口关联
import { SignUp } from "@/api/UserApi";

class Register extends React.PureComponent {
  state = {
    gender: 1, //男女
    loading: false //优化 按钮是否能点
  };

  /**
   * 注册操作
   */
  handleSubmit = e => {
    e.preventDefault();

    // 主动触发表单校验
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          loading: true
        });
        //  接收表单的value username password gender
        SignUp(values).then(response => {
          const { data } = response;
          if (data.code === 0) {
            // 3秒延迟
            message.success("注册成功", 1, () => {
              // 跳转到登录页面
              this.props.history.push("/login");
            });
          } else {
            // 注册失败
            message.error(data.msg);
            this.setState({
              loading: false
            });
          }
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.state;

    return (
      <div className="page-register">
        <Row className="page-register__row" type="flex" align="middle">
          <Col span={8} offset={8}>
            <Form onSubmit={this.handleSubmit} className="page-register__form">
              <Form.Item>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                    { type: "email", message: "请输入正确的邮箱地址！" }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="Username"
                  />
                )}
              </Form.Item>

              <Form.Item>
                {getFieldDecorator("password", {
                  rules: [
                    { required: true, message: "Please input your password!" },
                    { min: 6, message: "最少6位！" },
                    { max: 12, message: "最多12位！" }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    type="password"
                    placeholder="Password"
                  />
                )}
              </Form.Item>

              <Form.Item>
                {getFieldDecorator("gender", {
                  rules: [
                    { required: true, message: "Please select your gender!" }
                  ],
                  initialValue: this.state.gender
                })(
                  <Radio.Group>
                    <Radio value={1}>男</Radio>
                    <Radio value={2}>女</Radio>
                  </Radio.Group>
                )}
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="page-register__form-button"
                  loading={loading}
                >
                  注 册
                </Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Form.create()(Register);
